<template>
  <Card>
    <div class="flexCSB">
      <Button type="primary" @click="add">新增菜单</Button>
    </div>
    <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    :loading="loading1"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="menuName"
      label="菜单名称"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="sort"
      label="排序"
      align="center"
      >
    </el-table-column>
    <el-table-column
      prop="states"
      label="状态"
      align="center">
      <template slot-scope="scope">
          <el-tag v-if="scope.row.states=='1'" type="success">启用</el-tag>
          <el-tag v-if="scope.row.states=='2'" type="danger">禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="superAdminOwn"
      label="是否是系统内部菜单">
      <template slot-scope="scope">
          <el-tag v-if="scope.row.superAdminOwn==true" type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      >
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="change(scope.row)"
          type="success"
          size="small">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <Modal title="banner管理" v-model="modal" width="50">
    	<Form ref="form" :model="newData" :label-width="160">
            <FormItem label="菜单名：">
				<Input v-model="newData.menuName" placeholder="请输入菜单名" style="width: 100%"></Input>
			</FormItem>
            <FormItem label="权限：">
				<Input v-model="newData.permissions" placeholder="请输入权限" style="width: 100%"></Input>
			</FormItem>
            <FormItem label="权重：">
				<Input-number :min="0" v-model="newData.sort"></Input-number>
			</FormItem>
			<FormItem label="状态：">
				<Select v-model="newData.states">
					<Option value="1">启用</Option>
					<Option value="2">禁用</Option>
	          	</Select>
			</FormItem>
			<FormItem label="是否是系统内部菜单：">
				<Select v-model="newData.superAdminOwn">
	            	<Option value="true">是</Option>
	            	<Option value="false">否</Option>
	          	</Select>
			</FormItem>
			<FormItem label="父级菜单：">
	          	<Select v-model="newData.parentId">
                      <Option value="0">{{"顶级"}}</Option>
					<template v-for="item in parentMuen">
						<Option :value="item.id">{{item.menuName}}</Option>
					</template>
	          	</Select>
			</FormItem>
		</Form>
		<div slot="footer">
			<Button type="primary" :loading="loading2" class="Button" @click="submit">提交</Button>
		</div>
	</Modal>
  </Card>
</template>

<script>
	export default {
    	data() {
      		return {
      			loading1: false,
      			loading2: false,
                  tableData:[],
      			modal: false,
      			id: '',
      			newData:{
                      menuName:'',
                      parentId:'',
                      permissions:'',
                      sort:0,
                      states:'',
                      superAdminOwn:''
                  },
                parentMuen:[]
      		}
      	},
      	created(){
      		this.getMenuInfo()
            this.getParentMenu()
      	},
      	methods:{
      		getMenuInfo(){
      			this.loading1 = true;
			    this.$http("/stage/menu/getMenuInfo", {

			    }, "get", res => {
                    console.log(res);
			        if (res.data.code == 200) {
			        	this.tableData=res.data.data
                        this.loading1=false
			        }else{
                        this.$Message.error(res.data.msg)
                    }
			    })
      		},
            getParentMenu(){
                this.$http("/stage/menu/getParentMenu",{},"get",(res)=>{
                    if(res.data.code==200){
                        this.parentMuen=res.data.data
                        console.log(this.parentMuen);
                    }else{
                        this.$Message.error(res.data.msg)
                    }
                })
            },
            change(params){
                console.log(params);
                this.id=params.id
                this.modal=true
                this.newData={
                    menuName:params.menuName,
                    parentId:params.parentId,
                    permissions:params.permissions,
                    sort:params.sort,
                    states:String(params.states),
                    superAdminOwn:String(params.superAdminOwn)
                }
            },
      		add(){
      			this.modal = true
      			this.newData = {
      				menuName:'',
                    parentId:'',
                    permissions:'',
                    sort:0,
                    states:'',
                    superAdminOwn:''
      			}
      			this.id = ''
      		},
      		submit(){
      			this.loading2 = true;
      			let data = {}
      			if(this.id == ''){
      				data = {
      					menuName: this.newData.menuName,
						states: this.newData.states,
						permissions: this.newData.permissions,
						parentId: this.newData.parentId,
						sort: this.newData.sort,
                        superAdminOwn:this.newData.superAdminOwn
      				}
                      this.$http("/stage/menu/addMenu", data, "post", res => {
			        if (res.data.code == 200) {
			         	this.$Message.success('提交成功');
			         	this.modal = false
			         	this.getMenuInfo()
			        } else {
			          	this.$Message.error(res.data.msg);
			        }
			        this.loading2 = false
			    })
      			}else{
      				data = {
      					menuName: this.newData.menuName,
						states: this.newData.states,
						permissions: this.newData.permissions,
						parentId: this.newData.parentId,
						sort: this.newData.sort,
                        superAdminOwn:this.newData.superAdminOwn,
						id: this.id
      				}
                      this.$http("/stage/menu/updateMenu", data, "post", res => {
			        if (res.data.code == 200) {
			         	this.$Message.success('提交成功');
			         	this.modal = false
			         	this.getMenuInfo()
			        } else {
			          	this.$Message.error(res.data.msg);
			        }
			        this.loading2 = false
			    })
      			}
			    
      		},



      	},

  	}
</script>

<style scoped>
	
</style>